<template>
  <div>
    <div class="title">{{ cinemaInfo.movieName }}</div>
    <div class="titleInfo">
      <div>{{ cinemaInfo.showTime }}</div>
      <div>{{ cinemaInfo.name }}</div>
    </div>
    <div class="centerInfo">
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[0].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[1].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[2].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[3].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon" />
      </div>
    </div>
    <div class="screen">
      <div class="screen-text">屏幕方向</div>
    </div>
    <div class="box">
      <div
          v-for="(seatItem, index) in cinemaInfo.seatList"
          class="seatClass"
          :key="seatItem.id"
          @click="clickzuowei(seatItem)"
          :style="{
          height: height + 'rem',
          width: width + 'rem',
          top: seatItem.gRow * positionDistin + 'rem',
          left: seatItem.gCol * positionDistin + 'rem',
        }"
      >
        <img
            class="seatImgClass"
            :seatId="seatItem.id"
            :seatIndex="index"
            :src="cinemaInfo.seatTypeList[seatItem.type].icon"
        />
      </div>
    </div>
    <div class="btn" @click="ok">确 认 选 座</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //影院 厅信息
      cinemaInfo: {
        errorCode: 0,
        errorMsg: "",
        name: "4号厅",
        movieName: "白蛇传之白蛇缘起",
        showTime: "2019-03-06 周五 16:50",
        cinema_name: "惊奇队长影院",
        //座位信息
        seatList: [
          {
            //座位id
            id: "16879097",
            //座位X轴实际位置，去掉过道
            row: "1",
            //座位Y轴实际位置，去掉过道
            col: "1",
            //座位X轴位置
            gRow: 1,
            //座位Y轴位置
            gCol: 4,
            //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879101",
            row: "1",
            col: "4",
            gRow: 1,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879104",
            row: "1",
            col: "7",
            gRow: 1,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879099",
            row: "1",
            col: "2",
            gRow: 1,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879102",
            row: "1",
            col: "5",
            gRow: 1,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879105",
            row: "1",
            col: "8",
            gRow: 1,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879100",
            row: "1",
            col: "3",
            gRow: 1,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879103",
            row: "1",
            col: "6",
            gRow: 1,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879107",
            row: "1",
            col: "9",
            gRow: 1,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879113",
            row: "2",
            col: "1",
            gRow: 2,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879117",
            row: "2",
            col: "4",
            gRow: 2,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879120",
            row: "2",
            col: "7",
            gRow: 2,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879124",
            row: "2",
            col: "10",
            gRow: 2,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879114",
            row: "2",
            col: "2",
            gRow: 2,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879118",
            row: "2",
            col: "5",
            gRow: 2,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879121",
            row: "2",
            col: "8",
            gRow: 2,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879125",
            row: "2",
            col: "11",
            gRow: 2,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879116",
            row: "2",
            col: "3",
            gRow: 2,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879119",
            row: "2",
            col: "6",
            gRow: 2,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879122",
            row: "2",
            col: "9",
            gRow: 2,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879142",
            row: "3",
            col: "13",
            gRow: 3,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879129",
            row: "3",
            col: "2",
            gRow: 3,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879133",
            row: "3",
            col: "5",
            gRow: 3,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879136",
            row: "3",
            col: "8",
            gRow: 3,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879139",
            row: "3",
            col: "11",
            gRow: 3,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879143",
            row: "3",
            col: "14",
            gRow: 3,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879130",
            row: "3",
            col: "3",
            gRow: 3,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879134",
            row: "3",
            col: "6",
            gRow: 3,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879137",
            row: "3",
            col: "9",
            gRow: 3,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879141",
            row: "3",
            col: "12",
            gRow: 3,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879144",
            row: "3",
            col: "15",
            gRow: 3,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879128",
            row: "3",
            col: "1",
            gRow: 3,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879131",
            row: "3",
            col: "4",
            gRow: 3,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879135",
            row: "3",
            col: "7",
            gRow: 3,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879138",
            row: "3",
            col: "10",
            gRow: 3,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879154",
            row: "4",
            col: "9",
            gRow: 4,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879145",
            row: "4",
            col: "1",
            gRow: 4,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879158",
            row: "4",
            col: "12",
            gRow: 4,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879148",
            row: "4",
            col: "4",
            gRow: 4,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879161",
            row: "4",
            col: "15",
            gRow: 4,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879152",
            row: "4",
            col: "7",
            gRow: 4,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879155",
            row: "4",
            col: "10",
            gRow: 4,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879146",
            row: "4",
            col: "2",
            gRow: 4,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879159",
            row: "4",
            col: "13",
            gRow: 4,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879150",
            row: "4",
            col: "5",
            gRow: 4,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879153",
            row: "4",
            col: "8",
            gRow: 4,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879156",
            row: "4",
            col: "11",
            gRow: 4,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879147",
            row: "4",
            col: "3",
            gRow: 4,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879160",
            row: "4",
            col: "14",
            gRow: 4,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879151",
            row: "4",
            col: "6",
            gRow: 4,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879164",
            row: "5",
            col: "3",
            gRow: 5,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879168",
            row: "5",
            col: "6",
            gRow: 5,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879171",
            row: "5",
            col: "9",
            gRow: 5,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879175",
            row: "5",
            col: "12",
            gRow: 5,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879178",
            row: "5",
            col: "15",
            gRow: 5,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879162",
            row: "5",
            col: "1",
            gRow: 5,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879165",
            row: "5",
            col: "4",
            gRow: 5,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879169",
            row: "5",
            col: "7",
            gRow: 5,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879172",
            row: "5",
            col: "10",
            gRow: 5,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879176",
            row: "5",
            col: "13",
            gRow: 5,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879163",
            row: "5",
            col: "2",
            gRow: 5,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879167",
            row: "5",
            col: "5",
            gRow: 5,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879170",
            row: "5",
            col: "8",
            gRow: 5,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879173",
            row: "5",
            col: "11",
            gRow: 5,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879177",
            row: "5",
            col: "14",
            gRow: 5,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879207",
            row: "6",
            col: "11",
            gRow: 7,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879211",
            row: "6",
            col: "14",
            gRow: 7,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879198",
            row: "6",
            col: "3",
            gRow: 7,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879202",
            row: "6",
            col: "6",
            gRow: 7,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879205",
            row: "6",
            col: "9",
            gRow: 7,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879209",
            row: "6",
            col: "12",
            gRow: 7,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879212",
            row: "6",
            col: "15",
            gRow: 7,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879196",
            row: "6",
            col: "1",
            gRow: 7,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879199",
            row: "6",
            col: "4",
            gRow: 7,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879203",
            row: "6",
            col: "7",
            gRow: 7,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879206",
            row: "6",
            col: "10",
            gRow: 7,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879210",
            row: "6",
            col: "13",
            gRow: 7,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879197",
            row: "6",
            col: "2",
            gRow: 7,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879201",
            row: "6",
            col: "5",
            gRow: 7,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879204",
            row: "6",
            col: "8",
            gRow: 7,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879220",
            row: "7",
            col: "7",
            gRow: 8,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879223",
            row: "7",
            col: "10",
            gRow: 8,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879214",
            row: "7",
            col: "2",
            gRow: 8,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879227",
            row: "7",
            col: "13",
            gRow: 8,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879218",
            row: "7",
            col: "5",
            gRow: 8,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879221",
            row: "7",
            col: "8",
            gRow: 8,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879224",
            row: "7",
            col: "11",
            gRow: 8,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879215",
            row: "7",
            col: "3",
            gRow: 8,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879228",
            row: "7",
            col: "14",
            gRow: 8,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879219",
            row: "7",
            col: "6",
            gRow: 8,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879222",
            row: "7",
            col: "9",
            gRow: 8,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879213",
            row: "7",
            col: "1",
            gRow: 8,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879226",
            row: "7",
            col: "12",
            gRow: 8,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879216",
            row: "7",
            col: "4",
            gRow: 8,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879229",
            row: "7",
            col: "15",
            gRow: 8,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879230",
            row: "8",
            col: "1",
            gRow: 9,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879233",
            row: "8",
            col: "4",
            gRow: 9,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879237",
            row: "8",
            col: "7",
            gRow: 9,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879240",
            row: "8",
            col: "10",
            gRow: 9,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879244",
            row: "8",
            col: "13",
            gRow: 9,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879231",
            row: "8",
            col: "2",
            gRow: 9,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879235",
            row: "8",
            col: "5",
            gRow: 9,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879238",
            row: "8",
            col: "8",
            gRow: 9,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879241",
            row: "8",
            col: "11",
            gRow: 9,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879245",
            row: "8",
            col: "14",
            gRow: 9,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879232",
            row: "8",
            col: "3",
            gRow: 9,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879236",
            row: "8",
            col: "6",
            gRow: 9,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879239",
            row: "8",
            col: "9",
            gRow: 9,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879243",
            row: "8",
            col: "12",
            gRow: 9,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879246",
            row: "8",
            col: "15",
            gRow: 9,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879256",
            row: "9",
            col: "9",
            gRow: 10,
            gCol: 10,
            type: "3",
            flag: "0",
            price: "69",
          },
          {
            id: "16879260",
            row: "9",
            col: "12",
            gRow: 10,
            gCol: 14,
            type: "3",
            flag: "0",
            price: "69",
          },
          {
            id: "16879263",
            row: "9",
            col: "15",
            gRow: 10,
            gCol: 17,
            type: "2",
            flag: "0",
            price: "69",
          },
          {
            id: "16879247",
            row: "9",
            col: "1",
            gRow: 10,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879250",
            row: "9",
            col: "4",
            gRow: 10,
            gCol: 4,
            type: "2",
            flag: "0",
            price: "69",
          },
          {
            id: "16879254",
            row: "9",
            col: "7",
            gRow: 10,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879257",
            row: "9",
            col: "10",
            gRow: 10,
            gCol: 11,
            type: "2",
            flag: "0",
            price: "69",
          },
          {
            id: "16879261",
            row: "9",
            col: "13",
            gRow: 10,
            gCol: 15,
            type: "2",
            flag: "0",
            price: "69",
          },
          {
            id: "16879248",
            row: "9",
            col: "2",
            gRow: 10,
            gCol: 2,
            type: "2",
            flag: "0",
            price: "69",
          },
          {
            id: "16879252",
            row: "9",
            col: "5",
            gRow: 10,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879255",
            row: "9",
            col: "8",
            gRow: 10,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879258",
            row: "9",
            col: "11",
            gRow: 10,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879262",
            row: "9",
            col: "14",
            gRow: 10,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879249",
            row: "9",
            col: "3",
            gRow: 10,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "69",
          },
          {
            id: "16879253",
            row: "9",
            col: "6",
            gRow: 10,
            gCol: 7,
            type: "2",
            flag: "0",
            price: "69",
          },
        ],
        seatTypeList: [
          {
            name: "可选",
            type: "0",
            seats: 1,
            icon: require('@/assets/images/noselect.png'),
            isShow: "1",
            position: "up",
          },
          {
            name: "已选",
            type: "0-1",
            seats: 1,
            icon: require('@/assets/images/select.png'),
            isShow: "1",
            position: "up",
          },
          {
            name: "已售",
            type: "0-2",
            seats: 1,
            icon: require('@/assets/images/sale.png'),
            isShow: "1",
            position: "up",
          },
          {
            name: "维修",
            type: "0-3",
            seats: 1,
            icon: require('@/assets/images/repair.png'),
            isShow: "1",
            position: "up",
          },
          {
            name: "情侣首座可选",
            type: "1",
            seats: 1,
            icon: "https://www.xollipop.top/情侣首座可选.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣首座已选",
            type: "1-1",
            seats: 1,
            icon: "https://www.xollipop.top/情侣首座已选.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣首座已售",
            type: "1-2",
            seats: 1,
            icon: "https://www.xollipop.top/情侣首座已售.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣首座维修",
            type: "1-3",
            seats: 1,
            icon: "https://www.xollipop.top/情侣首座维修.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣次座可选",
            type: "2",
            seats: 1,
            icon: "https://www.xollipop.top/情侣次座可选.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣次座已选",
            type: "2-1",
            seats: 1,
            icon: "https://www.xollipop.top/情侣次座已选.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣次座已售",
            type: "2-2",
            seats: 1,
            icon: "https://www.xollipop.top/情侣次座已售.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣次座维修",
            type: "2-3",
            seats: 1,
            icon: "https://www.xollipop.top/情侣次座维修.png",
            isShow: "0",
            position: "up",
          },
          {
            name: "情侣座",
            type: "5",
            seats: 2,
            icon: "https://www.xollipop.top/情侣座.png",
            isShow: "1",
            position: "up",
          },
        ],
      },
      width: 1.4, // 每个座位的宽
      height: 2, // 每个座位的高
      positionDistin: 3, // 每个座位偏移距离
    };
  },
  methods: {
    //点击座位的时候切换图片。
    clickzuowei(val) {
      console.log(val, "座位信息");
      //循环影厅内座位信息
      this.cinemaInfo.seatList.forEach((item) => {
        //判断：选中座位和数组内的id是否一致
        if (item.id == val.id) {
          //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
          if (item.type == 0) {
            item.type = 1;
            //如果状态是1，也就是已经选中的状态，点击就会变成未选中
          } else if (item.type == 1) {
            item.type = 0;
            //如果状态2，也就是已经出售的座位，就提示从新选座
          } else if (item.type == 2) {
            alert("此座位已出售，请从新选座");
            //如果状态3，代表座位损坏，也是提示维修中。
          } else if (item.type == 3) {
            alert("此座位损坏，正在维修中！");
          }
        }
      });
    },
    //确认选座
    ok() {
      //筛选出选择的座位
      let info = this.cinemaInfo.seatList.filter((item) => {
        return item.type == 1;
      });
      let list = [];
      //筛选出选择的座位排和列
      info.forEach((item) => {
        list.push(item.row + " 排 " + item.col + " 座 ");
      });
      console.log("选中的座位信息:", info);
      //有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
      if (info.length == 0) {
        alert("请先选择座位，再确认购买！");
      } else {
        alert("当前选中座位:" + list.toString());
      }
    },
  },
};
</script>

<style scoepd>
.seatClass {
  position: absolute;
}
.box {
  position: relative;
  margin-top: -40px;
}
.seatImgClass {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.title {
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
  letter-spacing: 2px;
}
.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}
.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.centerInfo2 {
  display: flex;
  align-items: center;
}
.screen {
  width: 250px;
  border: 30px solid #ccc;
  border-color: #ccc transparent transparent transparent;
  height: 20px;
  margin: auto;
  margin-top: 10px;
}
.screen-text {
  text-align: center;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-top: -30px;
}
.btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
}
</style>
